<template>
    <el-dialog
        title="新建用户"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="600px"
    >
        <div v-if="reset">
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item label="姓名：" prop="name" label-width="100px">
                    <el-input v-model="formData.name" auto-complete="off" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone" label-width="100px">
                    <el-input v-model="formData.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="所属组织：" prop="deptId" label-width="100px">
                    <TreeSelectEx
                        placeholder="请选择所属组织"
                        v-model="formData.deptId"
                        :param="{dataFormat: 'list', key:{
                            isLeaf:e=>(!e.children||e.children.length<=0)&&(!e.subCount||e.subCount<=0)
                        }, async:{
                            enable: true, 
                            query:querySubDept, 
                        },
                        search: {
                            enable:true,
                            query:queryDept, 
                        }}"
                    ></TreeSelectEx>
                </el-form-item>
                <el-form-item label="身份证号：" prop="idCard" label-width="100px">
                    <el-input v-model="formData.idCard" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                </el-form-item>
                <el-form-item label="性别：" prop="gender" label-width="100px">
                    <el-radio-group v-model="formData.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱：" prop="mail" label-width="100px">
                    <el-input v-model="formData.mail" auto-complete="off" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="简介：" prop="profile" label-width="100px">
                    <el-input type="textarea" v-model="formData.profile" auto-complete="off" placeholder="用户简介"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import TreeSelectEx from '../../components/TreeSelectEx.vue'
import dept_api from '../../api/dept_api'
import user_api from '../../api/user_api'
export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
    },
    components: {
        TreeSelectEx,
    },
    created() {
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init&&this.init()
                })
            }
        }
    },
    data() {
        return {
            formData: {
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                deptId: [
                    { required: true, message: '请选择部门', trigger: 'change', validator: (rule, value, callback) => callback() }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                mail: [
                    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                profile: [
                    {
                        type: 'string',
                        max: 100,
                        message: '不要超过100个字符',
                        trigger: 'blur'
                    }
                ]
            },
            loadingSubmit: false,
            reset: true
        }
    },
    methods: {
        init() {
        },
        querySubDept(key, callback) {
            dept_api.listSubDept(key).then(data => {
                data.forEach(e => e.name = e.abbreviation)
                callback(data)
            })
        },
        queryDept(keyword, callback) {
            dept_api.listDept(keyword).then(data => {
                data.forEach(e => e.name = e.abbreviation)
                callback(data)
            })
        },
        handleSubmit(callback) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    user_api.addUser(this.formData).then(data => {
                        this.loadingSubmit = false
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        })
                        this.success(data)
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        },
    }
}
</script>

<style>
</style>